<template>
  <div id="echarts1"></div>
</template>
<script>
export default {
  data() {
    return {}
  },
  props: {
    data: {
      type: Array,
      default: () => {
        return []
      },
    },
  },

  mounted() {
    this.showEcharts1()
  },
  created() {},
  methods: {
    showEcharts1() {
      let array = JSON.parse(JSON.stringify(this.data))
      array.sort((a, b) => {
        return b.value - a.value
      }) //降序
      let myChart = this.$echarts.init(document.getElementById('echarts1'))
      var charts = {
        // 按顺序排列从大到小
        cityList: array.map((m) => m.name),
        cityData: array.map((m) => m.value),
      }
      var top10CityList = charts.cityList
      var top10CityData = charts.cityData
      var color = ['#ff9500', '#02d8f9', '#027fff']
      var color1 = ['#ffb349', '#70e9fc', '#4aa4ff']

      let lineY = []
      let lineT = []
      for (var i = 0; i < charts.cityList.length; i++) {
        var x = i
        if (x > 1) {
          x = 2
        }
        var data = {
          name: charts.cityList[i],
          color: color[x],
          value: top10CityData[i],
          barGap: '-100%',
          itemStyle: {
            // normal: {
            show: true,
            color: new this.$echarts.graphic.LinearGradient(
              0,
              0,
              1,
              0,
              [
                {
                  offset: 0,
                  color: color[x],
                },
                {
                  offset: 1,
                  color: color1[x],
                },
              ],
              false
            ),
            barBorderRadius: 10,
            // },
            emphasis: {
              shadowBlur: 15,
              shadowColor: 'rgba(0, 0, 0, 0.1)',
            },
          },
        }
        var data1 = {
          value: top10CityData[0],
          itemStyle: {
            color: '#001235',
            barBorderRadius: 10,
          },
        }
        lineY.push(data)
        lineT.push(data1)
      }
      var backTop = []
      for (var i = top10CityData.length - 1; i >= 0; i--) {
        backTop.push(top10CityData[i])
      }
      let option = {
        title: {
          show: false,
        },
        tooltip: {
          trigger: 'item',
          formatter: function (p) {
            // if (p.seriesName === 'total') {
            //   return ''
            // }
            return p.name + '<br/>' + p.value // + '起'
          },
          textStyle: {
            fontSize: 14,
            color: '#333',
          },
        },
        grid: {
          borderWidth: 0,
          top: '2%',
          left: '2%',
          right: '15%',
          bottom: '0%',
        },
        color: color,
        yAxis: [
          {
            type: 'category',
            inverse: true,
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: false,
              inside: false,
            },
            data: top10CityList,
          },
          {
            type: 'category',
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              color: '#fff',
              align: 'right',
              margin: 30,
              fontSize: 12,
              formatter: function (val) {
                return val
              },
            },
            splitArea: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            data: backTop,
          },
        ],
        xAxis: {
          type: 'log',
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
        },
        series: [
          {
            name: 'total',
            type: 'bar',
            zlevel: 1,
            barGap: '-100%',
            barWidth: '10px',
            data: lineT,
            legendHoverLink: false,
          },
          {
            name: 'bar',
            type: 'bar',
            zlevel: 2,
            barWidth: '10px',
            data: lineY,
            label: {
              // normal: {
                color: '#b3ccf8',
                show: true,
                position: [0, '-14px'],
                textStyle: {
                  fontSize: 12,
                },
                formatter: function (a) {
                  var num = ''
                  var str = ''
                  num = 'NO.' + (a.dataIndex + 1)
                  if (a.dataIndex === 0) {
                    str = '{color1|' + num + '} {color4|' + a.name + '}'
                  } else if (a.dataIndex === 1) {
                    str = '{color2|' + num + '} {color4|' + a.name + '}'
                  } else {
                    str = '{color3|' + num + '} {color4|' + a.name + '}'
                  }
                  return str
                },
                rich: {
                  color1: {
                    color: '#ff9500',
                    fontSize: 10,
                  },
                  color2: {
                    color: '#02d8f9',
                    fontSize: 10,
                  },
                  color3: {
                    color: '#027fff',
                    fontSize: 10,
                  },
                  color4: {
                    color: '#fff',
                    fontSize: 12,
                  },
                },
              // },
            },
          },
        ],
      }

      myChart.setOption(option)
    },
  },
}
</script>
